<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>jquery轮播</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		.banner{margin: 100px auto;border: 5px solid #000;width: 550px;height: 300px;overflow: hidden;position: relative;}
		.banner .img{width: 5000px;position: absolute;left: 0;top: 0;}
		.banner .img li{float: left;}
		

		.banner .num{position: absolute;width: 100%;bottom: 10px;left: 0;text-align: center;
		}
		.banner .num li{width: 10px;height: 10px;background: #888;border-radius: 50%;display: inline-block;margin: 0 3px;cursor: pointer;}
		.banner .num li.on{background: green;}

		.banner .btn{width:30px;height: 50px;background: rgba(0,0,0,.5); position: absolute;top: 50%;margin-top: -25px;cursor: pointer;text-align: center;line-height: 50px;color: #fff;font-size: 40px;font-family: '宋体';}
		.banner .btn-l{left: 0;}
		.banner .btn-r{right: 0}

	</style>
</head>
<body>
<div class="banner">
	<ul class="img">
		<li><a href="#"><img src="1.jpg"></a></li>
		<li><a href="#"><img src="2.jpg"></a></li>
		<li><a href="#"><img src="3.jpg"></a></li>
		<li><a href="#"><img src="4.jpg"></a></li>
	</ul>
	<ul class="num">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

	<div class="btn btn-l">&lt;</div>
	<div class="btn btn-r">&gt;</div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		var i=0;
		var clone = $('.banner .img li').first().clone();
		$('.banner .img').append(clone);
		var size= $('.banner .img li').size();//个数

		$('.banner .num li').first().addClass('on');

		// 鼠标滑入
		$('.banner .num li').hover(function(){
			var index = $(this).index();
			i = index;
			$('.banner .img').stop().animate({left:-index*550},500);
			$(this).addClass('on').siblings().removeClass('on');
		})

		// 自动轮播
		var t = setInterval(moveL,2000);

		// 对banner定时器的操作
		$('.banner').hover(function(){
			clearInterval(t);
		},function(){
			t = setInterval(moveL,2000);
		})

 		// 向左
		$('.banner .btn-l').click(function(){
			moveL()
			
		})

		

		$('.banner .btn-r').click(function(){
			moveR();
		})

		function moveL(){
			i++;
			if(i==size){
				i=1;
				$('.banner .img').css({left:0})
			}
			$('.banner .img').animate({left:-i*550},500);
			if(i==size-1){
				$('.banner .num li').eq(0).addClass('on').siblings().removeClass('on');
			}else{
				$('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
			}	
		}

		function moveR(){
			i--;
			if(i==-1){
				$('.banner .img').css({left:-(size-1)*550});
				i=size-2;
			}
			$('.banner .img').stop().animate({left:-550*i},500);
			$('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
		}
	})
</script>